<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>驴友社交-注册</title>
    <script src="js/jquery-1.4.1.min.js"type="text/javascript"></script>

    <script src="js/Format.js" type="text/javascript"></script>

    <script src="js/show_like.js" type="text/javascript"></script>

    <script src="js/GA_Statistics.js" type="text/javascript"></script>

<link href="CSS/register.css" rel="stylesheet" type="text/css" />
<script src="js/Check.js" type="text/javascript"></script>

<script type="text/javascript">
    $(function () {

            $("#register").removeClass().addClass("z_li_b");

            new PopupLayer({ trigger: "#showLike", popupBlk: "#divLike", closeBtn: "#closeLike",

                offsets: {

                    x: 102,

                    y: -41

                }

            });

            $(".z_font a").bind("click", function () {

                $("#agmentCheckbox").attr("checked", "checked");

            });

        });

        var Values = "";

        var likeNum = 0;

        var likeName = "";

        function addCheckVal(checkId, checkName) {

            var RemoveVal = Values.substring(0, Values.length - 1).split(",");

            for (var i = 0; i < RemoveVal.length; i++) {

                if (checkId == RemoveVal[i]) {

                    Values = Values.replace(RemoveVal[i] + ",", "");

                    likeName = likeName.replace(checkName + "&nbsp;&nbsp;", "");

                    $(string.Format("#div{0}", checkId)).removeClass().addClass("t_headpic");

                    $(string.Format("#sp{0}", checkId)).removeClass().addClass("t_checkbimg");

                    likeNum = likeNum - 1;

                    $("#likeNum").html(likeNum);

                    $("#ActivityIdList").val(Values.substring(0, Values.length - 1));

                    $("#likeName").html(likeName);

                    return;

                }

            }

            Values += string.Format("{0},", checkId);

            likeName += string.Format("{0}&nbsp;&nbsp;", checkName);

            $(string.Format("#div{0}", checkId)).removeClass().addClass("t_head");

            $(string.Format("#sp{0}", checkId)).removeClass().addClass("t_check");

            likeNum = likeNum + 1;

            $("#likeNum").html(likeNum);

            $("#ActivityIdList").val(Values.substring(0, Values.length - 1));

            $("#likeName").html(likeName);

        }

        function Submit() {

            var agmentCheckbox = $("#agmentCheckbox").attr("checked");

            if (!subUserName || !subUserPhone || !subUserPass || !subConfirmPass || !subUserCode) {

                Checked.UserNameOnblur();

                Checked.UserPhoneOnblur();

                Checked.UserPassOnblur();

                Checked.UserConfirmPassOnblur();

                Checked.UserCodeOnblur();

                return;

            }

            if (likeNum == 0) {

                alert("至少选择一项兴趣爱好!");

                return;

            }

            if (!agmentCheckbox) {

                alert("您必须同意了WhoYao网服务条款后才能进行注册!");

                return;

            }

            document.forms[0].submit();

        }

</script>
<link href="CSS/footer.css" rel="stylesheet" type="text/css" />
</head>
    <div class="content">
       <div class="z_main">
         <div class="z_left">
            <div class="z_logo">
                   <a href="javascript:void(0)"><img src="images/z_logo.png" border="0" /></a></div>
           <div class="z_li">
              <a href="Index.html" id="index" class="z_li_a"></a>
              <a href="Register.html" id="register" class="z_li_b"></a>
              <a href="Login.html" id="login" class="z_li_c"></a>
              <a href="ForgetPassword.html" id="forgetpass" class="z_li_d"></a>
           </div>
         </div>
         <div class="z_right">
         <!----------------------用户名---------------->
           <div class="z_right_li">
               <div class="z_right_li_a">
                   <b>*</b>用户名：</div>
               <input type="text" name="UserNameInput" id="UserNameInput" class="z_right_li_b" onfocus="Checked.UserNameOnfocus()";onblur="Checked.UserNameOnblur();" />
               <div id="UserNameShow" class="z_tishi" style="display: none">

                        如：yourname@example.com</div>

                    <div id="UserNameOK" class="z_right_li_c" style="display: none">

                    </div>

                    <div id="UserNameError" style="position: relative; display: none;">

                        <div class="z_right_wrong">
                        </div>

                        <div id="UserNameMsg" class="z_wrong">

                        </div>

                    </div>
            </div>
         <!----------------------电子邮箱-------------->
            <div class="z_right_li">
               <div class="z_right_li_a">
                   <b>*</b>电子邮箱：</div>
               <input type="text" name="UserNameInput" id="UserNameInput" class="z_right_li_b" onfocus="Checked.UserNameOnfocus()";onblur="Checked.UserNameOnblur();" />
               <div id="UserNameShow" class="z_tishi" style="display: none">

                        如：yourname@example.com</div>

                    <div id="UserNameOK" class="z_right_li_c" style="display: none">

                    </div>

                    <div id="UserNameError" style="position: relative; display: none;">

                        <div class="z_right_wrong">
                        </div>

                        <div id="UserNameMsg" class="z_wrong">

                        </div>

                    </div>
            </div>
            <!---------------------密码-------------------------------------->
            <div class="z_right_li">
              <div class="z_right_li_a">

                        <b>*</b>密码</div>

                    <input name="Password" type="password" id="Password" class="z_right_li_b" onfocus="Checked.UserPassOnfocus();"

                        onblur="Checked.UserPassOnblur();" />

                    <div id="UserPassShow" class="z_tishi" style="display: none">

                        由4—16位英文字母或数字组成，注意区分大小写！</div>

                    <div id="PhoneMsgOK" class="z_right_li_c" style="display: none;">

                    </div>

                    <div id="UserPassError" style="position: relative; display: none;">

                        <div class="z_right_wrong">

                        </div>

                        <div id="UserPassMsg" class="z_wrong">

                        </div>

                    </div>

            </div>
            
            <!--------------------------第二次输入确认密码--------------------------------->
            <div class="z_right_li">
               <div class="z_right_li_a">

                        <b>*</b>确认密码</div>

                    <input onblur="Checked.UserConfirmPassOnblur();" id="ConfirmPassword" class="z_right_li_b"

                        onfocus="Checked.UserConfirmPassOnfocus();" type="password" name="ConfirmPassword">

                    <div style="display: none" id="ConfirmPassOk" class="z_right_li_c">

                    </div>

                    <div style="position: relative; display: none" id="ConfirmPassError">

                        <div class="z_right_wrong">

                        </div>

                        <div id="ConfirmPassMsg" class="z_wrong">

                        </div>

                    </div>
                 
            </div>
            <!----------------------昵称---------------------------->
            <div class="z_right_li">
                <div class="z_right_li_a">

                        <b>*</b>昵称</div>

                    <input onblur="Checked.UserPhoneOnblur();" id="PhoneInput" class="z_right_li_b" onfocus="Checked.UserPhoneOnfocus();"

                        maxlength="11" name="PhoneInput">

                    <div style="display: none; top: -16px" id="PhoneMsgShow" class="z_tishi2">

                        昵称用于您和您的朋友交流时的称呼！</div>

                    <div style="display: none;" id="PhoneOK" class="z_right_li_c">

                    </div>

                    <div style="display: none;" id="PhoneMsgError">

                        <div class="z_right_wrong">

                        </div>

                        <div id="PhoneMsg" class="z_wrong">

                        </div>

                    </div>

            </div>
            <!--------------------选择所在地区------------------------------>
            <div class="z_right_li">
               <div class="z_right_li_a">
                   <b>*</b> 所在地</div>
               <select name="uProvin" id="uProvin" class="z_right_li_b" onchange="privionChange(this.value);">

                        <option value="全国">全国</option>

                    </select>

                    <select name="uCity" id="uCity" class="z_right_li_b">

                        <option value="0">请选择</option>

                    </select>

                    <div style="display: none" id="UserAddShow" class="z_tishi">

                        由4—16位英文字母或数字组成，注意区分大小写！</div>

                    <div style="display: none" id="UserAddOK" class="z_right_li_c">

                    </div>

                    <div style="display: none" id="UserAddError">

                        <div class="z_right_wrong">

                        </div>

                        <div id="UserAddMsg" class="z_wrong">

                        </div>

                    </div>

            </div>
            
           <!------------------兴趣爱好---------------------------->
           <div class="z_right_li">

                    <div class="z_right_li_a">

                        <b>*</b>旅游兴趣</div>

                    <a id="showLike" class="z_xingqu" href="javascript:void(0);"></a>

                    <div style="display: none" id="likeOk" class="z_right_li_c">

                    </div>

                    <div style="display: none" id="likeError">

                        <div class="z_right_wrong">

                        </div>

                        <div id="likeMsg" class="z_wrong">

                            请至少选择一项兴趣爱好！</div>

                    </div>

                </div>

                <div class="z_right_li_a">

                </div>

                <div style="display: inline; margin-left: 10px" class="z_wrong">

                    您已添加<font id="likeNum" color="#f14ab9">0</font>项兴趣爱好

                </div>                
                <!------------------验证码------------------------------->
                 <div class="z_right_li">

                    <div class="z_right_li_a">

                        <b>*</b>验证码</div>

                    <input type="text" id="AuthCodeInput" name="AuthCodeInput" class="z_yanzheng" maxlength="4"

                        onfocus="Checked.UserCodeOnfocus();" onblur="Checked.UserCodeOnblur();" />

                    <div style="float: left;">

                        <img src="/CheckCode/Index" id="AuthCodeImage" width="62" height="28" hspace="0"

                            vspace="0" border="0" id="ctl00_Body_AuthCodeImage" />

                        <a href="javascript:document.getElementById('AuthCodeImage').src='/CheckCode/Index?d='+new Date().getTime();void(0);"

                            style="font-size: 12px; margin-left: 0px;">换一张</a></div>

                    <div style="float: left; width: 50%;">

                        <div id="CodeOk" class="z_right_li_c" style="display: none;">

                        </div>

                        <div id="CodeError" style="position: relative; display: none;">

                            <div class="z_right_wrong">

                            </div>

                            <div id="CodeMsg" class="z_wrong">

                            </div>

                        </div>

                    </div>

                </div>
                <!----------------同意条款------------------------>
                <div class="z_right_li">

                    <div class="z_font">

                        <input type="checkbox" id="agmentCheckbox" />

                        <label>

                            已阅读过<a href="/PrivacyClause.html" target="_blank" style="color: #f14ab9;">whoyao网隐私声明协议</a></label>

                    </div>

                </div>

               <!-----------------------注册---------------------------->
               <div class="z_right_li">

                    <a href="javascript:Submit();">

                        <img src="images/dj.gif" border="0" style="margin-left: 93px;" /></a>

                </div>

         </div>
       </div>
    </div>
    <div class="footer">

    <center class="footerNav">

        <a href="/About.html" target="_blank">关于我们</a>| <a href="/FLink.html" target="_blank">

            友情链接</a>| <a href="/ContactUs.html" target="_blank">联系我们</a>| <a href="/Help.html"

                target="_blank">帮助中心</a>| <a href="/UserMessage.html" target="_blank">用户留言</a>

    </center>

    <center>

        版权所有北京交通大学软件学院 fine girls项目小组</center>

    <center>

        Copyright&copy; 2008-2012 Reunion Infotech co. ltd All rights reserved.</center>

</div>

<!-------------------------------------我的兴趣选择界面-------------------------------------------------->
 <div class="t_body" id="divLike" style="display: none">

        <div class="t_top">

            <div style="float: left;">

                &nbsp; 活动类型 <font style="font-size: 12px;">&nbsp;(您也可以在"我的配置"—"兴趣爱好"里加入自己喜欢的活动类型)</font></div>

            <a href="javascript:void(0);" id="closeLike" class="t_wrong"></a>

        </div>

        <div class="t_center">

            <div class="t_savor_tjb">

<ul>

<li>

<div id="div1" class="t_headpic">

<a id="check1" href="javascript:addCheckVal('1','美式撞球')">

<img src="../../Images/ico_actyList_a1.gif" /><span id="sp1" class="t_checkbimg"></span></a>

</div>

<div class="t_name"><a href="javascript:addCheckVal('1','美式撞球')">美式撞球</a></div>

</li>

<li>

<div id="div2" class="t_headpic">

<a id="check2" href="javascript:addCheckVal('2','羽毛球')">

<img src="../../Images/ico_actyList_a2.gif" /><span id="sp2" class="t_checkbimg"></span></a>

</div>

<div class="t_name"><a href="javascript:addCheckVal('2','羽毛球')">羽毛球</a></div>

</li>

<li>

<div id="div3" class="t_headpic">

<a id="check3" href="javascript:addCheckVal('3','篮球')">

<img src="../../Images/ico_actyList_a3.gif" /><span id="sp3" class="t_checkbimg"></span></a>

</div>

<div class="t_name"><a href="javascript:addCheckVal('3','篮球')">篮球</a></div>

</li>

<li>

<div id="div4" class="t_headpic">

<a id="check4" href="javascript:addCheckVal('4','乒乓球')">

<img src="../../Images/ico_actyList_a8.jpg" /><span id="sp4" class="t_checkbimg"></span></a>

</div>

<div class="t_name"><a href="javascript:addCheckVal('4','乒乓球')">乒乓球</a></div>

</li>

<li>

<div id="div5" class="t_headpic">

<a id="check5" href="javascript:addCheckVal('5','斯诺克')">

<img src="../../Images/ico_actyList_a9.gif" /><span id="sp5" class="t_checkbimg"></span></a>

</div>

<div class="t_name"><a href="javascript:addCheckVal('5','斯诺克')">斯诺克</a></div>

</li>

<li>

<div id="div6" class="t_headpic">

<a id="check6" href="javascript:addCheckVal('6','壁球')">

<img src="../../Images/ico_actyList_a10.gif" /><span id="sp6" class="t_checkbimg"></span></a>

</div>

<div class="t_name"><a href="javascript:addCheckVal('6','壁球')">壁球</a></div>

</li>

<li>

<div id="div7" class="t_headpic">

<a id="check7" href="javascript:addCheckVal('7','网球')">

<img src="../../Images/ico_actyList_a11.gif" /><span id="sp7" class="t_checkbimg"></span></a>

</div>

<div class="t_name"><a href="javascript:addCheckVal('7','网球')">网球</a></div>

</li>

<li>

<div id="div8" class="t_headpic">

<a id="check8" href="javascript:addCheckVal('8','K歌')">

<img src="../../Images/ico_actyList_a4.gif" /><span id="sp8" class="t_checkbimg"></span></a>

</div>

<div class="t_name"><a href="javascript:addCheckVal('8','K歌')">K歌</a></div>

</li>

<li>

<div id="div9" class="t_headpic">

<a id="check9" href="javascript:addCheckVal('9','吃饭')">

<img src="../../Images/ico_actyList_a5.gif" /><span id="sp9" class="t_checkbimg"></span></a>

</div>

<div class="t_name"><a href="javascript:addCheckVal('9','吃饭')">吃饭</a></div>

</li>

<li>

<div id="div10" class="t_headpic">

<a id="check10" href="javascript:addCheckVal('10','电影')">

<img src="../../Images/ico_actyList_a6.gif" /><span id="sp10" class="t_checkbimg"></span></a>

</div>

<div class="t_name"><a href="javascript:addCheckVal('10','电影')">电影</a></div>

</li>

<li>

<div id="div11" class="t_headpic">

<a id="check11" href="javascript:addCheckVal('11','郊游')">

<img src="../../Images/ico_actyList_a7.gif" /><span id="sp11" class="t_checkbimg"></span></a>

</div>

<div class="t_name"><a href="javascript:addCheckVal('11','郊游')">郊游</a></div>

</li>

</ul>

</div>



            <div class="t_icton">

                您已添加：<font color="#f14ab9" id="likeName"></font></div>

        </div>

    </div>

    <script type="text/javascript">

        loadPrivion();

        function loadPrivion() {



            var priv = document.getElementById("uProvin"); //省市

            var city = document.getElementById("uCity"); //市区

            var selectIndex = 0;

            priv.length = 1;

            $.getJSON("/GetAllProvin.html?d=" + new Date().getTime(), function (data) {

                for (var i = 0; i < data.length; i++) {

                    priv[i + 1] = new Option(data[i].City, data[i].Code);

                    if (data[i].SelectIndex != 0) {

                        //alert(data[i].SelectIndex);

                        selectIndex = data[i].SelectIndex;

                        privionChange(data[i].Code);

                    }

                }

                priv.selectedIndex = selectIndex;

            });

        }

        //加载省市级联

        function GetPrivion() {

            var priv = document.getElementById("uProvin"); //省市

            var city = document.getElementById("uCity"); //市区

            var selectIndex = 0;

            priv.length = 1;

            $.getJSON("/GetAllProvin.html?d=" + new Date().getTime(), function (data) {

                for (var i = 0; i < data.length; i++) {

                    priv[i + 1] = new Option(data[i].City, data[i].Code);

                    if (data[i].SelectIndex != 0) {

                        selectIndex = data[i].SelectIndex;

                    }

                }

                priv.selectedIndex = selectIndex;

            });

        }





        //加载2级城市

        function privionChange(val) {

            if (val == "全国" || val == "" || val == null) {

                document.getElementById("uCity").length = 1;

                return;

            }

            var priv = document.getElementById("uProvin"); //省市

            var city = document.getElementById("uCity"); //市区

            var selectIndex = 0;

            city.length = 1;

            $.getJSON("/GetCity.html?d=" + new Date().getTime(), { ParentCode: val }, function (data) {

                for (var i = 0; i < data.length; i++) {

                    city[i + 1] = new Option(data[i].City, data[i].Code);

                    if (data[i].SelectIndex != 0) {

                        selectIndex = data[i].SelectIndex;

                    }

                }

                city.selectedIndex = selectIndex;

            });

        }

    </script>


<body>
</body>
</html>